import { Link } from "react-router-dom";

const ButtonInfo = (props) => {
  // 从 props 解构出需要的变量
  const { profile, isCurrentUser, follow, unfollow } = props;

  const handleClick = (e) => {
    e.preventDefault();
    if (profile.following) {
      unfollow(profile.username);
    } else {
      follow(profile.username);
    }
  };

  if (isCurrentUser) {
    return (
      <Link to="/setting" className="btn btn-outline-info">
        <i className="iconfont icon-zhuanchezhuanyongbeifen"></i> 编辑
      </Link>
    );
  } else {
    return (
      <button
        onClick={handleClick}
        className={
          profile.following
            ? "btn btn-outline-danger"
            : "btn btn-outline-success"
        }
      >
        <i className="iconfont icon-xihuan"></i>
        {profile.following ? "取消关注" : "添加关注"}
      </button>
    );
  }
};

export default ButtonInfo;
